<template>
  <div class="student-analysis">
    <h2 class="title">学生分析</h2>
    <!-- 跳转到学习计划按钮 -->
    <div class="button-container">
      <el-button type="primary" size="medium" @click="goToLearningPlan">智能生成学习计划</el-button>
    </div>

    <!-- 学习习惯部分 -->
    <div class="section">
      <h3 class="section-title">学习习惯</h3>
      <el-table :data="studyHabits" style="width: 100%">
        <el-table-column label="习惯类型" prop="habitType" width="180"/>
        <el-table-column label="习惯描述" prop="habitDescription"/>
      </el-table>
    </div>

    <!-- 成绩分析部分 -->
    <div class="section">
      <h3 class="section-title">成绩分析</h3>
      <el-table :data="[scoreAnalysis]" style="width: 100%">
        <el-table-column label="平均分" prop="averageScore"/>
        <el-table-column label="高分科目" prop="highScores"/>
        <el-table-column label="低分科目" prop="lowScores"/>
        <el-table-column label="分析" prop="analysis"/>
      </el-table>
    </div>

    <!-- 德智体美劳分析部分（饼图） -->
    <div class="section">
      <h3 class="section-title">德智体美劳分析</h3>
      <div ref="pieChart" style="width: 100%; height: 400px;"></div> <!-- 饼图容器 -->
    </div>

    <!-- 预测挂科部分 -->
    <div class="section">
      <h3 class="section-title">挂科预测</h3>
      <el-table :data="predictions" style="width: 100%">
        <el-table-column label="课程名称" prop="courseName" />
<!--        <el-table-column label="预测分数" prop="predictedScore"/>-->
        <el-table-column label="挂科率" prop="riskOfFailure" />
        <el-table-column label="是否有风险" prop="predictionStatus" />
      </el-table>
    </div>

  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';  // 导入 echarts

export default {
  data() {
    return {
      studentName: JSON.parse(localStorage.getItem('honey-user')).name, // 获取学生名字
      studyHabits: [], // 学习习惯
      scoreAnalysis: {
        averageScore: 0,
        highScores: [],
        lowScores: [],
        analysis: '',
      },
      studentGrowth: {}, // 德智体美劳数据
      predictions: [], // 挂科预测数据
    };
  },
  mounted() {
    this.fetchLearningData(); // 在 mounted 中获取数据
    this.fetchPredictionData(); // 获取挂科预测数据
  },
  methods: {
    // 获取学习数据
    fetchLearningData() {
      axios
          .get(`http://localhost:9000/api/analysis/habits/${this.studentName}`)
          .then((response) => {
            this.studyHabits = response.data; // 存储学习习惯数据
          })
          .catch((error) => {
            console.error('获取学习习惯失败:', error);
          });

      axios
          .get(`http://localhost:9000/api/analysis/scores/analysis/${this.studentName}`)
          .then((response) => {
            this.scoreAnalysis = response.data; // 存储成绩分析数据
          })
          .catch((error) => {
            console.error('获取成绩分析失败:', error);
          });

      axios
          .get(`http://localhost:9000/api/analysis/growth/${this.studentName}`)
          .then((response) => {
            this.studentGrowth = response.data; // 存储德智体美劳数据
            this.drawPieChart(); // 绘制饼图
          })
          .catch((error) => {
            console.error('获取德智体美劳数据失败:', error);
          });
    },

    // 获取挂科预测数据
    fetchPredictionData() {
      axios
          .get(`http://localhost:9000/api/analysis/predictions/name/${this.studentName}`)
          .then((response) => {
            this.predictions = response.data; // 存储挂科预测数据
          })
          .catch((error) => {
            console.error('获取挂科预测失败:', error);
          });
    },

    // 绘制饼图
    drawPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart); // 获取饼图容器

      // 饼图的数据
      const data = [
        { value: this.studentGrowth.moralEducation, name: '德育' },
        { value: this.studentGrowth.intellectualEducation, name: '智育' },
        { value: this.studentGrowth.physicalEducation, name: '体育' },
        { value: this.studentGrowth.aestheticEducation, name: '美育' },
        { value: this.studentGrowth.laborEducation, name: '劳动教育' },
      ];

      const option = {
        title: {
          text: '德智体美劳分析',
          subtext: '各项分数',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['德育', '智育', '体育', '美育', '劳动教育'],
        },
        series: [
          {
            name: '教育领域',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };

      pieChart.setOption(option); // 设置饼图的配置项
    },

    // 跳转到学习计划页面
    goToLearningPlan() {
      this.$router.push({ name: 'learningPlan' }); // 跳转到 LearningPlan.vue 页面
    },
  },
};
</script>

<style scoped>
/* 页面背景 */
.student-analysis {
  padding: 20px;
  background-color: #f7f8fa;
}

/* 标题样式 */
.title {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  margin-bottom: 30px;
}

/* 每个部分的样式 */
.section {
  margin-bottom: 40px;
}

/* 每个部分标题样式 */
.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

/* 表格样式 */
.el-table {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 按钮容器 */
.button-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>
